<template>
  <div id="workRela">
    <div id="workhidden">
      <el-table
        ref="refTable"
        :data="tableData"
        :row-class-name="tableRowClassName"
        border
        style="width: 400px"
        @row-click="rowClick"
      >
        <el-table-column
          type="expand"
          width="1"
        >
          <template slot-scope="scope">
            <el-table
              ref="refTable1"
              :data="scope.row.columnDescs"
              :row-class-name="tableRowClassName"
              border
              style="width: 350px"
              @row-click="rowClick1"
            >
              <el-table-column
                width="150"
                prop="columnName"
                label="名称"
              />
              <el-table-column
                prop="comment"
                label="备注"
              />
            </el-table>
          </template>
        </el-table-column>

        <el-table-column
          prop="tableName"
          label="表名"
        >
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="left"
            >
              <p>{{ scope.row.tableName }}</p>
              <div
                slot="reference"
                class="name-wrapper"
              >
                {{ scope.row.tableName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
          prop="tableComment"
          label="描述"
        >
          <template slot-scope="one">
            <el-input v-model="one.row.comment"/>
          </template>
        </el-table-column>
      </el-table>
      <div id="searchBox">
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="changeSelect"
        >
          <el-option
            v-for="(item,key,index) in options"
            :key="index"
            :label="item"
            :value="key"
          />
        </el-select>
        <el-button
          class="next"
          @click="animate"
        >配置关系
        </el-button>
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
        >
          <vue-editor
            v-model="helpArrays.CONFIG_RELATION"
            :disabled="true"
            :editor-toolbar="customToolbar"
          />
          <i
            slot="reference"
            class="el-icon-question"
            style="color:#409eff;margin-left:5px;font-size:20px;"
          />
        </el-popover>
        <el-button
          class="next"
          @click="setAnimate"
        >保存</el-button>
      </div>
      <el-table
        :data="arrs"
        border
        style="width: 550px"
      >
        <el-table-column
          prop="masterTableName"
          label="主表"
        >
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="left"
            >
              <p>{{ scope.row.masterTableName }}</p>
              <div
                slot="reference"
                class="name-wrapper"
              >
                {{ scope.row.masterTableName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="masterColumnName"
          label="主表属性"
        />

        <el-table-column
          prop="childTableName"
          label="副表"
        >
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="left"
            >
              <p>{{ scope.row.childTableName }}</p>
              <div
                slot="reference"
                class="name-wrapper"
              >
                {{ scope.row.childTableName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="childColumnName"
          label="副表属性"
        />
        <el-table-column
          prop="relationType"
          label="关系"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.relationType == 'One'">一对一</span>
            <span v-if="scope.row.relationType == 'Many'">一对多</span>
            <span v-if="scope.row.relationType == 'Self_One'">自关联一对一</span>
            <span v-if="scope.row.relationType == 'Self_Many'">自关联一对多</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="childTableName"
          label="视图列设置"
        >
          <template slot-scope="scope">
            <div class="addShow">
              <el-button
                v-if="scope.row.relationType == 'Self_One'"
                type="text"
                @click="addShows(scope.row.childTableName,scope.row)"
              >

                <i class="el-icon-setting" />
              </el-button>
              <el-button
                v-if="scope.row.relationType == 'One'"
                type="text"
                @click="addShows(scope.row.childTableName,scope.row)"
              >
                <i class="el-icon-setting" />
              </el-button>
              <el-dialog
                :visible.sync="dialogVisible"
                title="提示"
                width="500px"
              >

                <!-- <el-checkbox-group v-model="c.fieldViewCols"> -->
                <el-checkbox
                  v-for="(items,index) in shows.body"
                  :key="index"
                  :label="items.columnName"
                  v-model="c.fieldViewCols"
                />
                <br>
                <!-- </el-checkbox-group> -->
                <p style="text-align:center;">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="dialogVisible = false"
                  >确 定</el-button>
                </p>

              </el-dialog>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div style="clear:both"/>
    </div>

  </div>
</template>
<script>
import { relationData, relationDataSave, eleInfo, docwindow } from '@/api/page'
import { VueEditor } from 'vue2-editor'
var elrow = document.getElementsByClassName('el-table__row')
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      add: {},
      arrs: [],
      arr: [],
      customToolbar: [],
      shows: [],
      checkList: [],
      save: {
        pid: '',
        relations: []
      },
      getIndex: '',
      getIndex1: '',
      getIndex2: '',
      getIndex3: '',
      getIndex4: '',
      getIndex5: '',
      row1: '',
      row2: '',
      main: true,
      minor: true,
      dialogVisible: false,
      value: 'One',
      options: {},
      tableData: [],
      c: '',
      helpArrays: []
    }
  },
  mounted() {
    //  this.arr = JSON.parse(localStorage.getItem("helpJSON"))
    this.save.pid = localStorage.getItem('pid')
    relationData(this.save)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.tableData = response.data.data.data
          this.options = response.data.data.relationTypes
          this.arrs = response.data.data.relations
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
        this.$router.push('/admin')
      })

    this.arr = ['CONFIG_RELATION']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    onBack() {
      this.$router.go(-1)
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
      return 'row-expand-cover'
    },
    changeSelect() {
      this.main = true
      this.minor = true
      this.getIndex = ''
      this.getIndex1 = ''
      this.getIndex2 = ''
      this.getIndex3 = ''
      this.getIndex4 = ''
      this.getIndex5 = ''
      this.row1 = ''
      this.row2 = ''
      this.add = {}
      for (var i = 0; i < elrow.length; i++) {
        elrow[i].style.backgroundColor = '#fff'
      }
      relationData(this.save).then(response => {
        this.tableData = response.data.data.data
      })
    },
    animate() {
      var aProps = ''
      var bProps = ''
      var key = ''
      if (this.value == 'One') {
        if (this.main == true || this.minor == true) {
          alert('请选择表')
        } else {
          if (this.getIndex4 !== '' && this.getIndex5 !== '') {
            this.add.fieldViewCols = []
            this.add.relationType = this.value
            const data = Object.assign({}, JSON.parse(JSON.stringify(this.add)))

            for (var i = 0; i < this.arrs.length; i++) {
              if (this.arrs[i].masterTableName == data.masterTableName) {
                if (this.arrs[i].masterColumnName == data.masterColumnName) {
                  if (this.arrs[i].childTableName == data.childTableName) {
                    if (this.arrs[i].childColumnName == data.childColumnName) {
                      alert('不可重复添加')
                      this.changeSelect()
                      return true
                    }
                  }
                }
              }
            }
            this.arrs.push(data)
            this.changeSelect()
          } else {
            alert('请选择表属性')
          }
        }
      } else if (this.value == 'Many') {
        if (this.minor == true || this.minor == true) {
          alert('请选择表')
        } else {
          if (this.getIndex5 !== '') {
            this.add.relationType = this.value
            const data = Object.assign({}, JSON.parse(JSON.stringify(this.add)))
            for (var i = 0; i < this.arrs.length; i++) {
              if (this.arrs[i].masterTableName == data.masterTableName) {
                if (this.arrs[i].masterColumnName == data.masterColumnName) {
                  if (this.arrs[i].childTableName == data.childTableName) {
                    if (this.arrs[i].childColumnName == data.childColumnName) {
                      alert('不可重复添加')
                      this.changeSelect()
                      return true
                    }
                  }
                }
              }
            }
            this.arrs.push(data)
            this.changeSelect()
          } else {
            alert('请选择表属性')
          }
        }
      } else {
        if (this.main == true) {
          alert('请选择表')
        } else {
          if (this.getIndex4 !== '') {
            this.add.fieldViewCols = []
            this.add.relationType = this.value
            const data = Object.assign({}, JSON.parse(JSON.stringify(this.add)))
            for (var i = 0; i < this.arrs.length; i++) {
              if (this.arrs[i].masterTableName == data.masterTableName) {
                if (this.arrs[i].masterColumnName == data.masterColumnName) {
                  if (this.arrs[i].childTableName == data.childTableName) {
                    if (this.arrs[i].childColumnName == data.childColumnName) {
                      alert('不可重复添加')
                      this.changeSelect()
                      return true
                    }
                  }
                }
              }
            }
            data.childColumnName = data.masterColumnName
            data.childTableName = data.masterTableName
            this.arrs.push(data)
            this.changeSelect()
          } else {
            alert('请选择表属性')
          }
        }
      }
    },
    rowClick(row, $event, column) {
      if (column.property == 'tableComment') {
        return true
      }

      if (this.main == true && this.minor == true) {
        this.getIndex1 = ''
        this.getIndex = ''
      }
      if (this.value == 'One') {
        if (this.getIndex1 !== row.index) {
          this.redColor(row, event)
        }

        if (this.getIndex !== row.index) {
          this.row2 = row
          this.blueColor(row, event)
        }
        if (this.main == false && this.minor == false) {
          if (this.getIndex1 == row.index || this.getIndex == row.index) {
            this.$refs.refTable.toggleRowExpansion(row)
          }
          return true
        }
        this.$refs.refTable.toggleRowExpansion(row)
        this.row1 = row
      }
      if (this.value == 'Many') {
        if (this.getIndex1 !== row.index) {
          this.redColor(row, event)
        }

        if (this.getIndex !== row.index) {
          this.row2 = row
          this.blueColor(row, event)
        }

        if (this.minor == false) {
          if (this.getIndex1 == row.index) {
            this.$refs.refTable.toggleRowExpansion(row)
          }
        } else {
          if (this.getIndex1 === row.index) {
            this.$refs.refTable.toggleRowExpansion(row)
          }
        }
        this.row1 = row
      }
      if (this.value == 'Self_One' || this.value == 'Self_Many') {
        if (this.getIndex1 !== row.index) {
          this.redColor(row, event)
        }
        if (this.main == false) {
          if (this.getIndex1 === row.index || this.getIndex === row.index) {
            this.$refs.refTable.toggleRowExpansion(row)
          }
          return true
        }
        this.$refs.refTable.toggleRowExpansion(row)
        this.row1 = row
      }
    },
    rowClick1(row, $event, column) {
      if (column.property == 'tableComment') {
        return true
      }

      for (var i = 0; i < this.getIndex2.columnDescs.length; i++) {
        if (this.getIndex2.columnDescs[i] == row) {
          if (this.getIndex4 === '') {
            event.currentTarget.style.backgroundColor = '#ccc'
            this.add.masterColumnName = row.columnName
            this.getIndex4 = row.index
          } else {
            if (this.getIndex4 == row.index) {
              event.currentTarget.style.backgroundColor = '#fff'
              this.getIndex4 = ''
              delete this.add.masterColumnName
            }
          }
        }
      }
      if (this.getIndex3 == '') {
        return true
      } else {
        for (var i = 0; i < this.getIndex3.columnDescs.length; i++) {
          if (this.getIndex3.columnDescs[i] == row) {
            if (this.getIndex5 === '') {
              event.currentTarget.style.backgroundColor = '#ccc'
              this.add.childColumnName = row.columnName

              this.getIndex5 = row.index
            } else {
              if (this.getIndex5 == row.index) {
                event.currentTarget.style.backgroundColor = '#fff'
                this.getIndex5 = ''
                delete this.add.childColumnName
              }
            }
          }
        }
      }
    },
    redColor(row, event) {
      if (this.main == true) {
        event.currentTarget.style.backgroundColor = '#f3aa0c'
        this.getIndex = row.index
        this.add.masterTableName = row.tableName
        this.add.masterColumnName = ''
        this.main = false
        this.getIndex2 = row
      } else {
        if (this.getIndex == row.index) {
          event.currentTarget.style.backgroundColor = '#fff'
          this.main = true
          delete this.add.masterTableName
          this.getIndex2 = ''
          this.getIndex4 = ''
        }
      }
    },
    blueColor(row, event) {
      if (this.minor == true) {
        event.currentTarget.style.backgroundColor = '#37B7F3'
        this.getIndex1 = row.index
        this.add.childTableName = row.tableName
        this.minor = false
        this.getIndex3 = row
      } else {
        if (this.getIndex1 == row.index) {
          event.currentTarget.style.backgroundColor = '#fff'
          this.minor = true
          delete this.add.childTableName
          this.getIndex3 = ''
          this.getIndex5 = ''
        }
      }
    },
    setAnimate() {
      this.save.relations = []
      this.save.tableInfos = {}
      for (var i = 0; i < this.arrs.length; i++) {
        delete this.arrs[i].id
        delete this.arrs[i].pid
        delete this.arrs[i].deleteStatus
        this.save.relations.push(this.arrs[i])
      }
      var tables = new Object()

      for (var i = 0; i < this.tableData.length; i++) {
        tables[this.tableData[i].tableName] = this.tableData[i].comment
        this.save.tableInfos = tables
      }
      console.log(this.save)

      relationDataSave(this.save)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.openFullScreen()
            setTimeout(() => {
              this.loading.close()
              this.$router.push('/admin')
            }, 1000)
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    addShows(a, b) {
      var show = {
        pid: this.save.pid,
        tableName: a
      }
      eleInfo(show)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.shows = response.data
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })

      this.dialogVisible = true
      this.c = b
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>
<style>
#workRela .el-table {
  float: left;
  margin: 2%;
}
#workRela #searchBox .el-button {
  height: 22px;
  line-height: 2px;
}
#workRela .el-select {
  width: 100px;
}

#workRela .el-table__body tr:hover > td {
  background-color: transparent !important;
}
#workRela #searchBox {
  float: left;
  width: 130px;
  margin-top: 10%;
}
#workRela #searchBox .el-button {
  margin-top: 10px;
  width: 100px;
}
#workRela .el-table__expand-column {
  /* display: none; */
  visibility: hidden;
}
#workRela .el-table__body .cell {
  overflow: hidden;
  /*height: 23px;*/
}
#workRela .el-table_1_column_2 .cell {
  padding: 0px;
}
#workRela .el-table__expanded-cell[class*="cell"] {
  padding: 20px 40px;
}
#workRela .el-checkbox {
  width: 160px;
  margin-left: 0px;
  margin-right: 30px;
}
#workRela .next {
  background: #623f18;
  color: #fff;
}
#workRela .addShow .el-button--text{
  padding: 0px;
}
#workRela .addShow{
  text-align: center;
}
#workRela .el-dialog{
  text-align: left;
}
</style>
